<extend name="./Application/Admin/View/Layout/application.html"/>
<!-- sidebar end -->

<!-- content start -->
<block name="content">
    <div class="admin-content">
        <div class="admin-content-body">
            <div class="am-cf am-padding am-padding-bottom-0">
                <div class="am-fl am-cf">
                    <strong class="am-text-primary am-text-lg">新增商品</strong> /
                    <small>Product</small>
                </div>
            </div>

            <hr>
            <form class="am-form" action="{{:U('add')}}" method="post">
                <div class="am-tabs am-margin" data-am-tabs>
                    <ul class="am-tabs-nav am-nav am-nav-tabs">
                        <li class="am-active"><a href="#tab1">通用信息</a></li>
                        <li><a href="#tab2">商品介绍</a></li>
                        <li><a href="#tab3">商品相册</a></li>
                    </ul>

                    <div class="am-tabs-bd">
                        <div class="am-form am-tab-panel am-fade am-in am-active" id="tab1">
                            <div class="am-g am-margin-top">
                                <div class="am-u-sm-4 am-u-md-2 am-text-right">所属类别</div>
                                <div class="am-u-sm-8 am-u-md-10">
                                    <select name="category_id" data-am-selected="{btnSize: 'sm'}">
                                        <volist name="categories" id="category">
                                            <option value="{{$category.id}}" disabled>{{$category.name}}
                                                <volist name="category.children" id="child">
                                            <option value="{{$child.id}}">
                                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                &nbsp;&nbsp;|--{{$child.name}}
                                            </option>
                                        </volist>
                                        </option>
                                        </volist>
                                    </select>
                                </div>
                            </div>

                            <div class="am-g am-margin-top">
                                <div class="am-u-sm-4 am-u-md-2 am-text-right">商品名称</div>
                                <div class="am-u-sm-8 am-u-md-3 am-u-end col-end">
                                    <input type="text" class="am-input-sm" name="name" required>
                                </div>
                            </div>

                            <div class="am-g am-margin-top">
                                <div class="am-u-sm-4 am-u-md-2 am-text-right">商品单价</div>
                                <div class="am-u-sm-8 am-u-md-3 am-u-end col-end">
                                    <input type="text" class="am-input-sm" name="price" required>
                                </div>
                            </div>

                            <div class="am-g am-margin-top">
                                <div class="am-u-sm-4 am-u-md-2 am-text-right">库存</div>
                                <div class="am-u-sm-8 am-u-md-3 am-u-end col-end">
                                    <input type="text" class="am-input-sm" name="stock" required>
                                </div>
                            </div>


                            <div class="am-g am-margin-top">
                                <div class="am-u-sm-4 am-u-md-2 am-text-right">
                                    缩略图
                                </div>

                                <div class="am-u-sm-8 am-u-md-8 am-u-end col-end">
                                    <div class="am-form-group am-form-file">
                                        <button type="button" class="am-btn am-btn-success am-btn-sm new_thumb">
                                            <i class="am-icon-cloud-upload" id="loading"></i> 上传缩略图
                                        </button>
                                        <div id="upload_one" style="display: none;"></div>
                                        <div id="view_one">
                                            <input type="hidden" name="thumb" value="">
                                            <img src="" class="img-responsive"
                                                 style="margin-top:5px;max-height:150px;max-width: 150px;">
                                        </div>
                                    </div>

                                    <hr data-am-widget="divider" style="" class="am-divider am-divider-dashed"/>

                                    <div>
                                        <img src="" id="img_show" style="max-height: 200px;">
                                    </div>
                                </div>
                            </div>

                            <div class="am-g am-margin-top">
                                <div class="am-u-sm-4 am-u-md-2 am-text-right">上架</div>
                                <div class="am-u-sm-8 am-u-md-10">
                                    <div class="am-btn-group">
                                        <label class="am-radio-inline">
                                            <input type="radio" value="1" name="is_onsale" > 是
                                        </label>
                                        <label class="am-radio-inline">
                                            <input type="radio" value="0" name="is_onsale"> 否
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <div class="am-g am-margin-top">
                                <div class="am-u-sm-4 am-u-md-2 am-text-right">推荐类型</div>
                                <div class="am-u-sm-8 am-u-md-10">
                                    <div class="am-btn-group" data-am-button>

                                        <label class="am-btn am-btn-default am-btn-xs">
                                            <input type="checkbox" name="is_top"> 置顶
                                        </label>
                                        <label class="am-btn am-btn-default am-btn-xs">
                                            <input type="checkbox" name="is_recommend"> 推荐
                                        </label>
                                        <label class="am-btn am-btn-default am-btn-xs">
                                            <input type="checkbox" name="is_hot"> 热销
                                        </label>
                                        <label class="am-btn am-btn-default am-btn-xs">
                                            <input type="checkbox" name="is_new"> 新品
                                        </label>
                                    </div>
                                </div>
                            </div>


                            <div class="am-g am-margin-top">
                                <div class="am-u-sm-4 am-u-md-2 am-text-right">
                                    发布时间
                                </div>
                                <div class="am-u-sm-8 am-u-md-3 am-u-end col-end">
                                    <div class="am-input-group am-datepicker-date"
                                         data-am-datepicker="{format: 'yy-m-d'}">
                                        <input type="text" class="am-form-field" name="created_at" readonly>
                                        <span class="am-input-group-btn am-datepicker-add-on">
                                <button class="am-btn am-btn-default" type="button">
                                    <span class="am-icon-calendar"></span>
                                </button>
                                </span>
                                    </div>
                                </div>
                            </div>

                        </div>

                        <div class="am-tab-panel am-fade" id="tab2">
                            <form class="am-form">


                                <div class="am-g am-margin-top-sm">
                                    <div class="am-u-sm-12 am-u-md-2 am-text-right admin-form-text">
                                        内容描述
                                    </div>
                                    <div class="am-u-sm-12 am-u-md-10">
                                         <textarea rows="10" style="width:700px;height:300px;" id="container"
                                                   name="description"></textarea>
                                    </div>
                                </div>

                            </form>
                        </div>

                        <div class="am-tab-panel am-fade" id="tab3">
                            <div class="am-g am-margin-top">
                                <div class="am-u-sm-4 am-u-md-2 am-text-right">
                                    商品相册
                                </div>

                                <div class="am-u-sm-8 am-u-md-8 am-u-end col-end">
                                    <div class="am-form-group am-form-file">
                                        <div id="upload_more"></div>
                                        <div id="view_more"></div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="am-margin">
                        <button type="submit" class="am-btn am-btn-primary am-radius">提交保存</button>
                    </div>

                </div>
            </form>

        </div>
    </div>

    <footer class="admin-content-footer">
        <hr>
        <p class="am-padding-left">© 2014 AllMobilize, Inc. Licensed under MIT license.</p>
    </footer>
    <!-- content end -->
</block>


